@import "reset";
body{
    background-color: #f1f1f1;
}
.container{
    width: 7.5rem;
    margin: 0 auto;
    background-color: #f1f1f1;
    padding-bottom: 1.2rem;//处理底部固定遮挡内容
}
.wrap{
    width: 7.1rem;
    margin: 0 auto;
}
.header{
    height: 0.88rem;
    background-color: #fff;
    .wrap{
        height: 0.88rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    h1{
        img{
            width: 1.47rem;
            height: 0.33rem;
        }
    }
    input{
        width: 3rem;
        height: 0.4rem;
        background-color: #eee;
        border-radius: 0.04rem;
        text-align: center;
        font-size: 0.18rem;
    }
    .points{
        span{
            float: left;
            width: 0.13rem;
            height: 0.13rem;
            border-radius: 50%;
            background-color: #000;
            margin: 0 0.05rem;
        }
    }
}
.nav{
    background-color: #fff;
    height: 0.8rem;
    line-height: .8rem;
    .wrap{
        position: relative;
        overflow: hidden;
    }
    ul {
        width: 20rem;
        li{
        float: left;
        font-size: .28rem;
        //padding: 0 .19rem;
        a{
            color: #202020;
            padding: 0 .19rem;
          }
          &.first{     
            position: relative;     
            a{    
                
                color: #e40033;
                 border-right: 1px solid #f1f1f1;
    
            }
            &::after{
                position: absolute;
                left: .19rem;
                bottom: 0;
                content:'';
                width: calc(100% - .38rem);
                height: .04rem;
                background-color: #e40033;
            }
        }
       }
    }
    .arrow{
        position: absolute;
        top: 0;
        right: 0;
        padding-left: .2rem;
        background-color: #fff;
        img{
            width: .35rem;
            height: .21rem;
        }
    }
}
.banner{
    position: relative;
    height: 2.91rem;
    a{
        position: absolute;
        top: 0;
        left: 0;
        img{
            width: 7.5rem;
            height: 2.91rem;
        }
    }

}
.flex-nav{
    background-color: #fff;
    height: 1.8rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .item{
        font-size:.24rem ;
        text-align: center;
        img{
            width: .64rem;
            height: .62rem;
            margin-bottom: .2rem;
        }
        a{
            color: #595959;
        }
    }
}
.sale{
    height: 3.8rem;
    background-color: #fff;
    margin-top: .3rem;
    display: flex;
    justify-content: space-between;
    .left{
       position: relative;
        width: 3.77rem;
        height: 3.8rem;
        padding-left: .16rem;
        box-sizing: border-box;
        h3{
            font-size: .3rem;
            color: #ff064f;
            letter-spacing: .04rem;
            margin-top: .16rem;
            img{
                width: .33rem;
                height: .31rem;
                margin-right:.1rem;
                vertical-align: -.06rem;
            }
        }
        .des{
            font-size: .22rem;
            color: #999;
            margin:.07rem 0;
        }
        .time{
            font-size: .26rem;
            span{
                display: inline-block;
                background-color: #333;
                color: #fff;
                line-height: .42rem;
                padding: 0 .09rem;
                border-radius: .05rem;
                margin: 0 .04rem;
            }
            i{
                color: #333;
                display: inline-block;
                line-height: .41rem;
                padding: 0 .25rem 0 .21rem;
                background: url("../images/index_images/bg.jpg") no-repeat;
                background-size: 100% 100%;
            }
        }
        .pic{
            display: block;
            width: 2.36rem;
            height: 2rem;
            margin: .18rem auto;

        }
        .price{
            position: absolute;
            right:.3rem;
            bottom: .3rem;
            width: .88rem;
            height: .88rem;
            border-radius: 50%;
            background-color: #ff064f;
            color: #fff;
            font-size: .16rem;
            line-height: .88rem;
            text-align: center;
            span{
                font-size: .24rem;
            }

        }
        
    }
    .right{
        width: 3.5rem;
        height: 3.8rem;
        border-left: 1px solid #eeeeee;    
        h3{
            position: relative;
            font-size: .3rem;
            color: #ff064f;
            letter-spacing: .04rem;
            margin-top: .16rem;
            
            span{
                position: absolute;
                top: 0;
                left: 1.32rem;
                display: inline-block;
                margin-left: .05rem;
                margin-top: .02rem;
                background-color:#ff064f;
                text-align: center;
                padding: 0.03rem .06rem;
                
              i{
                display: block;
                margin-left: 0.05rem;
                font-size: .22rem;
                color:#fff;
               }
               
            }
        
        }
        .des{
            font-size: .22rem;
            color: #999;
            margin:.07rem 0;
        }
        .brand{
            width: .90rem;
            height: .40rem;
            margin-top: .20rem; 
           
        }
        .right1{
           padding:0 .20rem;
           padding-bottom: .05rem;
           border-bottom: 1px solid #eeeeee;
            
        }
        .right1-l{
            float: left;
            
        }
        .right1-r{
           margin-top: .16rem;
           float: right;
           img{
               width: 1.10rem;
               height: 1.60rem;
           }
        }
        ul {
            li{
                float: left;
                width: 1.38rem;
                height: 1.98rem;
                padding: 0 .2rem;
                border-left: 1px solid #eeeeee;
            }
            .shop-pic1{
                display: block;
                width: .6rem;
                height: 1rem;
                margin: .15rem auto;
            }
            .shop-pic2{
                display: block;
                width: 1.1rem;
                height: .85rem;
                margin: .25rem auto;
            }
            .last{
                padding-right: 0;
            }
         
        }
    }
}
.banner2{
    height: 1.87rem;
    margin-top: .3rem;
    img{
        width: 7.5rem;
        height: 1.87rem;
    }
}
.goods{
    margin-top: .3rem;
    background-color: #fff;
    padding: .2rem .2rem;
    .hot-nav{ 
        width: 7rem; 
        height: .7rem;
        font-size: .24rem;
        li{
            float: left;
            width: 1.75rem; 
            height: .7rem;
            line-height: .7rem;
            border:1px solid #eeeeee;
            box-sizing: border-box;
            text-align: center;
            &:hover{
                background-color: #f26b11;
                a{
                    color: #fff;
                }
            }
        }
        .del-l
        {
            border-left:none;
        }
        
    }
    .good{
        box-sizing: border-box;
        margin: .1rem 0 .2rem 0;
        width: 7rem;
        height: 3rem;
        padding: .45rem .5rem;
        border: 1px solid #eeeeee;
        box-shadow: 0 0 .02rem .01rem #eeeeee;
        img{
            width: 2.16rem;
            height: 2.2rem;
        }
        .left{
            float: left;
        }
        .right{
            float: left;
            margin-left: .5rem;
            .title{
                font-size: .24rem;
                margin-bottom: .2rem;
            }
            .price{
                font-size: .16rem;
                color: #f26b11;
                margin-bottom: .2rem;
                i{
                    font-size: .12rem;
                    margin-right: .04rem;
                }
            }
            .count{
                font-size: .16rem;
                color: #949494;
                margin-bottom: .2rem;
            }
            .btn{
                width: 1.6rem;
                height: .5rem;
                border-radius: .05rem;
                line-height: .5rem;
                text-align: center;
                background-color: #f26b11;
                color: #fff;
                font-size: .24rem;
            }
        }
        

    }
}

.fixed-menu{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1.2rem;
    .con{
        width: 7.5rem;
        margin: 0 auto;
        height: 1.2rem;
        background-color: #fff;
        .nav{
            font-size: .22rem;
            width: 6.3rem;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            padding-top: .22rem;
            box-sizing: border-box;
            line-height:1.8;
            a{
               color: #999;
               text-align: center;
               i{
                   display: block;
                   width:.58rem;
                   height: .58rem;
                   background-size: contain;
                   background-repeat: no-repeat;
               }
               &:first-child i{
                   background-image: url("../images/public/icon_6.jpg");
               }
               &:nth-child(2) i{
                background-image: url("../images/public/icon_7.jpg");
               }
               &:nth-child(3) i{
                background-image: url("../images/public/icon_5.jpg");
                }
            }
        }
    }

}